<template>
  <div class="jifen">
    <header>
      <div class="left" ><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a>换卡查询</a></div>
    </header>
    <div v-scroll="down()" scroll-foot="500" scroll-top="200" scroll-up="up()">
      {{a}}
    </div>
  </div>

</template>

<script>
import vue_scroll from 'vue_scroll'


export default {
  name: 'hello',
  data () {
    return {
      msg: '积分商城',
      a: [],
      b: []
    }
  },
  methods: {
      down: function () {
         //当滚动条距离底部高度小于或等于你在scroll-foot设置的高度时将运行一次此函数
         //if scrollFoot height <= scroll-foot , function run.
        for (var i = this.a.length; i < this.b.length; i++) {
          this.a.push(this.b[i])
          if (i % 6 === 5) {
            break
          }
        }
      },
      up: function () {
        //当滚动条距离顶部高度小于或等于你在scroll-top设置的高度时将运行一次此函数
        //if scrollTop height <= scroll-top , function run.
      }
    },
    ready: function () {
      //滚动翻页实例（请按照自己的需要去修改）
      //scroll the instance.
      $.ajax({
          url: '#',
          type: 'get',
          success: function (res) {
            if (res.status === 200) {
              // 初始化数据 先获取所有数据并初始化前６条
              //Initialize the data,get 0-6 data of the array.
              this.$set('b', res.data)
              for (var i = 0; i < 6; i++) {
                this.a.push(this.b[i])
              }
            }
          }
        })
    }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(200) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
  .right{
    a{
      display: block;
      text-align: center;
      .padding(0,40,0,0);
      color:#ffffff;
    }
  }
}

</style>
